<template>
	<view class="bind-email-content">
		<u-navbar :is-back="false" title="绑定邮箱"></u-navbar>
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item label="邮箱账户" prop="email" label-width="150">
				<u-input placeholder="请输入邮箱(目前只支持QQ邮箱)" v-model="form.email" type="text"></u-input>
			</u-form-item>
			<u-form-item label="验证码" prop="code" label-width="150">
				<u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
				<u-button slot="right" type="success" size="mini" @click="getCode" :disabled="!canGetVerifacationCode">
					{{codeTips}}
				</u-button>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">确认</u-button>

		<!-- 以下为绑定邮箱时，必要的其他弹出组件 -->
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单填写错误的提示形式
				errorType: ['message'],
				codeTips: '获取验证码',
				canGetVerifacationCode: false,
				// 表单数据
				form: {
					Token:'',
					// 因为上一个注册页面已经将学生基本信息存入本地文件中
					// 故此处不需要
					email: '',
					code: '',
				},
				rules: {
					email: [{
							required: true,
							message: '请输入 QQ 邮箱',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						},
						{
							// type: 'email',
							validator: (rule, value, callback) => {
								// 利用正则表达式检验 QQ 邮箱格式
								let pattern = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@qq\.com/;
								let bool = pattern.test(value);
								console.log(bool);
								if (bool) {
									this.$data.canGetVerifacationCode = true;
								} else {
									this.$data.canGetVerifacationCode = false;
								}
								// 返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return bool;
							},
							message: '请输入正确的 QQ 邮箱格式',
							trigger: ['change', 'blur']
						}
					],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
				}
			}
		},
		// 整个页面被加载时调用的方法
		// 如果登录页面填写有学号和学院，此处将会赋值到输入框中，即使输入框被禁用
		// 此方法还不成熟，因为后端数据还未确定
		// 等待修改
		onLoad(option) {
			// this.$data.departmentLabel = option.departmentValue
			// this.$data.form.studentID = option.studentID
			let value = uni.getStorageSync('UserMsg')
			console.log(value)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('绑定邮箱通过');
						console.log(this.$data.email);
						this.$u.post('/user/check/code', {
							code: this.$data.form.code
						}).then(res => {
							console.log(res);
							let resultCode = res.statusCode;

							let localValue = uni.getStorageSync('UserMsg')
							if (resultCode === 0) {

								console.log(this.$data.form.email)
								let _this = this;

								uni.setStorage({
									key: 'UserMsg',
									data: {
										Token: localValue.Token,
										// 校区实际值，不展示给用户，将会传往后端
										campusValue: localValue.campusValue,
										// 学院实际值，不展示给用户，将会传往后端
										collegeValue: localValue.collegeValue,
										// 专业实际值，不展示给用户，将会传往后端
										majorValue: localValue.majorValue,
										// 班级实际值，不展示给用户，将会传往后端
										clazzValue: localValue.clazzValue,
										// 学号
										StuID: localValue.StuID,
										// 学生姓名
										studentName: localValue.studentName,
										// 性别
										// 需要注意的是，此处性别并非为 0 或 1 表示男性女性
										// 而是 男孩子 或 女孩子 三个字
										// 如若需要，未来将会进行修改
										gender: localValue.gender,
										email: this.$data.form.email
									},
									success: function() {
										console.log('success');
									},
									complete: function() {
										let localValue = uni.getStorageSync('UserMsg');
										console.log(localValue);
										console.log(localValue.studentID);

									}
								});

								this.$u.route({
									type: 'navigateTo',
									url: '/pages/setPassword/index',
									params: this.$data.form
								});
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error',
									icon: false,
									position: 'bottom'
								});

							}
							// console.log(res);
						});
					} else {
						// 提示用户信息未输入完成
						this.$refs.uToast.show({
							title: '请填写完整信息',
							type: 'error',
							icon: false,
							position: 'bottom'
						});

						// this.$u.route({
						// 	type: 'navigateTo',
						// 	url: '/pages/setPassword/index',
						// 	params: this.$data.form
						// });
					}
				})
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
					console.log(this.$data.form.email);
					this.$u.post('/user/send/email', {
						QQEmail: this.$data.form.email
					}).then(res => {
						let restult = res.statusCode;
						if (restult !== 0) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								icon: false,
								position: 'bottom'
							});
						}
						console.log(res);
					});
				} else {
					this.$refs.uToast.show({
						title: '倒计时结束后再发送',
						type: 'error',
						icon: false,
						position: 'bottom'
					});
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	/* 整个页面加了美化效果 */
	.bind-email-content {
		margin: 0rpx 50rpx;
	}
</style>
